<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>form 表单验证</title>
		<script type="text/javascript">
			// 验证form表单是否合法
			/*
			 * 如果是submit类型的按钮，
			 * 可以通过在click事件的执行代码中返回false来告诉浏览器终止当前的form表单的提交动作；
			 */
			function checkMe() {
				// 错误提示信息
				var strMsg = "";
				// 验证用户名不能为空
				// 获取用户名dom对象
				var dom_name = document.getElementById("txtName");
				// 通过value属性获取控件的值
				var txtName = dom_name.value;
				if(txtName == null || txtName == "") {
					// 增加提示信息
					strMsg += "请输入用户名!\n";
				}

				// 密码验证
				var txtPsw = document.getElementById("txtPsw").value;
				if(txtPsw == null || txtPsw == "") {
					// 增加提示信息
					strMsg += "请输入密码!\n";
				}

				// 邮箱非空验证，合法性验证采用正则表达式验证
				var txtEmail = document.getElementById("txtEmail").value;
				if(txtEmail == null || txtEmail == "") {
					// 增加提示信息
					strMsg += "请输入邮箱!\n";
				}
				
				/*******************************************/
				// 使用正则表达式进行邮箱合法性验证
				var regExp = /^\w+@\w+\.[A-Za-z]{2,3}(\.[A-Za-z]{2,3})?$/;
				// 验证合法性
				if(!regExp.test(txtEmail)){
					// 匹配不成功
					// 增加提示信息
					strMsg += "请输入合法的邮箱格式!\n";
				}
				/******************************************/
				// 性别单选框验证
				// 获取所有的单选框对象
				// 获取的是存储多个单选对象的数组
				var radioSexs = document.getElementsByName("txtSex");
				var isCheckedSex = false; // 默认没有选择
				// 循环遍历来确定是否进行了选择【循环肯定或循环否定法】
				if(radioSexs != null && radioSexs.length > 0) {
					for(var i = 0; i < radioSexs.length; i++) {
						// 有选择的选项，则修改标识变量
						if(radioSexs[i].checked) {
							isCheckedSex = true;
							// 终止
							break;
						}
					}
				}
				// 判定是否选择了性别
				if(isCheckedSex == false) {
					// 没有选择性别，提示
					// 增加提示信息
					strMsg += "请选择性别!\n";
				}

				// 出生年月判定
				var selectYear = document.getElementById("selectYear").selectedIndex;
				var selectMonth = document.getElementById("selectMonth").selectedIndex;
				// index == 0 标识没有选择下拉框
				if(selectYear == 0) {
					// 增加提示信息
					strMsg += "请选择出生年份!\n";
				}
				if(selectMonth == 0) {
					// 增加提示信息
					strMsg += "请选择出生月份!\n";
				}

				// 兴趣选择验证--- 至少选择一项
				// 获取的是存储多个单选对象的数组
				var chkHobbys = document.getElementsByName("chkHobby");
				// 默认选中的个数
				var chCount = 0; // 默认选择了0项
				// 循环遍历来确定是否进行了选择【循环肯定或循环否定法】
				if(chkHobbys != null && chkHobbys.length > 0) {
					for(var i = 0; i < chkHobbys.length; i++) {
						// 有选择的选项，则修改标识变量
						if(chkHobbys[i].checked) {
							// 选中个数+1
							chCount++;
						}
					}
				}
				// 判定是否选择了兴趣
				if(chCount < 1) {
					// 没有选择兴趣，提示
					// 增加提示信息
					strMsg += "请至少选择一项兴趣!\n";
				}

				// 判定整个表单是否可以进行提交
				if(strMsg == "") {
					// 验证通过
					return true;
				} else {
					// 验证不通过
					alert(strMsg);
					return false;
				}
			}

			/*
			 * submit类型的按钮可以直接提交form表单；
			 * 初次意外，其他类型的按钮需要在click事件中，
			 * 显式调用form对象的submit方法才可以提交form表单；
			 */
			// 手动提交form表单
			function doSubmit() {
				document.getElementById("form1").submit();
			}
		</script>
	</head>

	<body>
		<form id="form1" action="#" method="get">
			<table border="1px" bordercolor="#8CE9FB" cellspacing="0px" cellpadding="3px" align="center" width="500px">
				<tr>
					<td>用户名:</td>
					<td><input type="text" id="txtName" name="txtName" /></td>
					<td>登录用户名</td>
				</tr>
				<tr>
					<td>密码:</td>
					<td><input type="password" id="txtPsw" name="txtPsw" /></td>
					<td>登录密码...</td>
				</tr>
				<tr>
					<td>注册邮箱:</td>
					<td><input type="text" id="txtEmail" name="txtEmail" /></td>
					<td>登录邮箱</td>
				</tr>
				<tr>
					<td>性别:</td>
					<td>
						<!---如果一组单选框需要具有互斥选择功能：要求这一组单选框的name属性一样，就划分一组，具有互斥功能---->
						<input type="radio" id="txtSex" name="txtSex" />女
						<input type="radio" id="txtSex2" name="txtSex" />男
					</td>
					<td>选择性别</td>
				</tr>
				<tr>
					<td>出生年月:</td>
					<td>
						<select id="selectYear" name="selectYear">
							<option value=""></option>
							<option value="2000">2000年</option>
							<option value="2001">2001年</option>
							<option value="2002">2002年</option>
							<option value="2003">2003年</option>
							<option value="2004">2004年</option>
						</select>年
						<select id="selectMonth" name="selectMonth">
							<option value=""></option>
							<option value="1">1月</option>
							<option value="2">2月</option>
							<option value="3">3月</option>
							<option value="4">4月</option>
							<option value="5">5月</option>
						</select>月
					</td>
					<td>选择年月</td>
				</tr>
				<tr>
					<td>兴趣爱好:</td>
					<td>
						<!---如果一组多选框：要求这一组多选框的name属性一样，就划分一组，给服务器发送数据时，作为一个整体进行发送---->
						<input type="checkbox" id="chkHobby" name="chkHobby" />打游戏
						<input type="checkbox" id="chkHobby2" name="chkHobby" />睡觉
						<input type="checkbox" id="chkHobby3" name="chkHobby" />旅游
						<input type="checkbox" id="chkHobby4" name="chkHobby" />写代码
					</td>
					<td>选择兴趣爱好</td>
				</tr>
				<tr>
					<td>头像:</td>
					<td><input type="file" id="fileImg" name="fileImg" /></td>
					<td>选择上传头像图片</td>
				</tr>
				<tr>
					<td>个人简介:</td>
					<td>
						<textarea cols="30" rows="8" id="txtIntroduction" name="txtIntroduction">
							请输入个人简介...
						</textarea>
					</td>
					<td>登录用户名</td>
				</tr>
				<tr>
					<td colspan="3" align="center">
						<!--submit和reset按钮，需要在form标签中才会起作用--->
						<input type="submit" id="submitMe" name="submitMe" value="提交" onclick="return checkMe();" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input type="reset" id="resetMe" name="resetMe" value="重置" />
					</td>

				</tr>
			</table>
		</form>
	</body>

</html>